<template>
	<view class="content">
		<view class="title">
			<u--image shape="circle" :src="src" width="200rpx" height="200rpx"></u--image>
		</view>
		<view class="name">{{name}}</view>
		<!-- v-if="userInfo.avatarUrl==''?true:false" -->
		<h1 @click="zhendiong">震动</h1>
		<u-button type="success" text="login" @click="login()" v-if="userInfo.avatarUrl==''?true:false">登录</u-button>
		<u-cell-group :clickable="true">
			<u-cell icon="chat" title="联系开发者" @click="()=>relationshow=true" :clickable="true">
				<u-icon name="arrow-right" size="20" color="#999" slot="right-icon"></u-icon>
			</u-cell>
			<u-cell icon="email" title="意见反馈" name="权限" @click="()=>opinionshow=true" :clickable="true">
				<u-icon name="arrow-right" size="20" color="#999" slot="right-icon"></u-icon>
			</u-cell>
		</u-cell-group>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<u-popup :show="relationshow" @close="close" mode="center" :round="10" closeable="true">
			<view style="padding: 130rpx 100rpx;">
				<text>l1147484597</text> <span style="color: blue;margin-left: 30rpx;"
					@click="copyBtn('l1147484597')">复制</span>
			</view>
		</u-popup>
		<u-popup :show="opinionshow" @close="opinionclose" mode="center" :round="10" closeable="true">
			<view style="padding: 30rpx 30rpx;width: 550rpx;">
				<u--textarea v-model="opinionvalue" placeholder="请输入内容" count border="surround"></u--textarea>
				<u-button type="primary" text="确定"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		addUser,
		getUser,
		updateUser
	} from '../../request/user.js'
	export default {
		data() {
			return {
				relationshow: false,
				opinionshow: false,
				opinionvalue: '',
				openid: '',
				share: {
					title: '好玩的小程序',
					path: '/pages/mine/mine',
				},
				res: '',
				userInfo: {
					avatarUrl: '',
					nickName: '',
					gender: ''
				}
			};
		},
		computed: {
			src() {
				return this.userInfo.avatarUrl || "http://cdn.uviewui.com/uview/empty/data.png"
			},
			name() {
				return this.userInfo.nickName || "请先登录"
			}
		},
		onShareAppMessage: function() { // 分享到微信
			// 更多参数配置，参考文档
			return {
				title: '分享标题',
				path: '/pages/index/index'
			}
		},
		async onShow() {
			console.log('mine Show11,16', uni.getSystemInfoSync().platform)

			await uni.login({
				success: async res => {
					const res3 = await addUser({
						code: res.code
					})
					console.log(res3, 'res3')
					this.openid = res3.data.openid || res3.data[0].openid
					console.log('this.openid', this.openid)
					uni.setStorageSync('openid', this.openid);
					// const userinfo = await getUser(this.openid)
					if (res3.data[0] && res3.data[0].name && res3.data[0].avatarUrl) {
						this.userInfo.nickName = res3.data[0]?.name
						this.userInfo.avatarUrl = res3.data[0].avatarUrl
						console.log('this.userinfo', this.userInfo)
					}
				}
			})
		},
		methods: {
			close() {
				this.relationshow = false
			},
			opinionclose() {
				this.opinionshow = false
			},
			copyBtn(value) {
				uni.setClipboardData({
					data: value,
					success: function() {
						console.log('success');
					}
				})
			},
			zhendiong() {
				this.$shake()
				// uni.vibrateShort({
				// 	success: function() {
				// 		console.log('success');
				// 	}
				// });
			},
			async bth(name) {

				console.log('name', name)

				// this.$refs.uNotify.show({
				// 	top: 0,
				// 	type: 'error',
				// 	color: '#fff',
				// 	bgColor: '#096',
				// 	message: '客官请稍待，开发中...',
				// 	duration: 1000 * 2,
				// 	fontSize: 16,
				// 	safeAreaInsetTop: false
				// })
			},
			async login() {
				// console.log('uni.getStorageSy',uni.getStorageSync('openid'))
				uni.getUserProfile({
					desc: '获取用户信息',
					success: async res => {
						this.userInfo = Object.assign(this.userInfo, res.userInfo)
						console.log('this.userInfo', this.userInfo)
						const result = await updateUser(this.openid, {
							name: this.userInfo.nickName,
							avatarUrl: this.userInfo.avatarUrl,
							data: {}
						})
						console.log('result', result)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;

		.title {
			margin-top: 50rpx;
			width: 200rpx;
			height: 200rpx;
		}

		.name {
			margin: 30rpx 0;
		}

		.u-cell-group {
			margin-top: 40rpx;
			width: 100%;
		}
	}
</style>